<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <!-- <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> -->
    <style>
      main {
        width: 400px;
        height: 200px;
        border: 1px solid;
      }
      .header {
        display: flex;
        background-color: #000;
        color: #fff;
        height: 30px;
        line-height: 30px;
      }
      .content ul {
        position: absolute;
        display: none;
        left: 0;
      }
      .content .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="header">
        <div class="block1">第一节</div>
        <div class="block2">第二节</div>
        <div class="block3">第三节</div>
      </div>
      <div class="content">
        <ul class="block1-box active">
          <li>这是第一节1</li>
          <li>这是第一节2</li>
          <li>这是第一节3</li>
        </ul>
        <ul class="block2-box">
          <li>这是第二节1</li>
          <li>这是第二节2</li>
          <li>这是第二节3</li>
        </ul>
        <ul class="block3-box">
          <li>这是第三节1</li>
          <li>这是第三节2</li>
          <li>这是第三节3</li>
        </ul>
      </div>
    </main>
    <script>
      var block = document.querySelectorAll(".header div");
      var ul = document.querySelectorAll(".content ul");
      var index = 0;
      var lastindex = index;

      for (var i = 0; i < block.length; i++) {
        block[i].index = i;
        console.log(block[i]);
        block[i].onmouseenter = function() {
          this.style.backgroundColor = "#D3D3D3";
          this.style.color = "#000";
          index=this.index
          show();
        };
        block[i].onmouseleave = function() {
          this.style.backgroundColor = "#000";
          this.style.color = "#fff";
        };
      }
      function show() {
        ul[lastindex].classList.remove("active");
        ul[index].classList.add("active");
        lastindex = index;
      }
    </script>
    <!-- <script src="../bootstrap/js/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script> -->
  </body>
</html>
